.ui-rate {
	display: inline-flex;
	cursor: pointer;
	user-select: none;

	.ui-rate--item {
		position: relative;

		&:not(:last-child) {
			padding-right: 10rpx;
		}
		.ui-rate--icon {
			display: block;
			width: 1em;
			color: #a5a7b2;
			font-size: $font-size-base;
		}
		&.is-half {
			.ui-rate--icon-half {
				position: absolute;
				top: 0;
				left: 0;
				width: 0.5em;
				overflow: hidden;
				z-index: 1;
			}
		}

		&.is-full {
			color: $brand-primary;
		}

		&.is-disabled {
			color: $fill-disabled;
		}
	}

	&.is-disabled {
		cursor: not-allowed;
	}

	&.is-readonly {
		cursor: default;
	}
}
